<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入搜索内容 " id="debounce" autofocus>
    <script>
        window.onload=function(){
            const input=document.getElementById('debounce');
            let t1=+new Date();
            let t=2000;
            console.log(new Date());
            /*const ajax=(event)=>{
                let keyword=event.target.value;
                console.log(keyword);
                let t2=+new Date();
                console.log(t2-t1);
                if(t2-t1>t){
                    t1=t2;
                }
            }*/
            //回调函数(异步处理函数)
            // 1. keyup在一开始就声明  放到事件池 event loop
            //2. 事件处理函数是在事件发生时触发并执行的
            // 异步?回到 event池子里找出事件处理函数调用执行
            // 单位时间里如何减少执行次数
            //1970 毫秒数 日期对象 类型转换 自动转变成整数类型
            // deboundceAjax 是 debounce函数的执行结果
            const ajax=(event)=>{
                console.log('搜索'+event.target.value);
            }
            const debounce=(cb,t)=>{
                return cb;
            }
            const debounceAjax=debounce(ajax,t);
            // 事件 api 第二个参数 一定是函数
            input.addEventListener('keyup',debounceAjax)
        }
    </script>
</body>
</html>